<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>第四周玩练作业</title>
    <style>
    li{
      list-style:none;
    }
      .current{
        background-color: blue;
        color: #FFF;
      }
      .clear{
        background-color: #FFF;
        color: #000;
      }
    </style>
  </head>
  <body>
    <ul>
      <li class="current">列表一</li>
      <li>列表二</li>
      <li>列表三</li>
      <li>列表四</li>
    </ul>
  </body>
  <script type="text/javascript">
    var uldom = document.querySelector("ul");
    var currentDom = uldom.firstElementChild;//当前选中的对向，
    document.addEventListener("keyup",function (event){
      switch (event.keyCode) {
        case 38://向上移动
          up(event);
          break;
        case 40://向下移动
        down(event);
        break;
      };
    });

    /*
    向上移动
    */
    function up(event) {
      //如果当前项目是最后一个，则选中第一个子项目
      if(currentDom.previousElementSibling == null){
        currentDom = uldom.lastElementChild;
      }else{
        currentDom = currentDom.previousElementSibling;
        }
      currentDom.className = "current";//设置当前选择dom样式
      //清除当前选择dom前一个元素样式
      //如果当前dom是最后一个项目，则清除第一个项目样式
      if(currentDom.nextElementSibling == null){
        uldom.firstElementChild.className = "clear";
      }else{
        currentDom.nextElementSibling.className = "clear";
      }
}
    /*
    向下移动
    */
    function down(event) {
      //如果当前项目是最后一个，则选中第一个子项目
      if(currentDom.nextElementSibling == null){
        currentDom = uldom.firstElementChild;
      }else{
        currentDom = currentDom.nextElementSibling;
        }
      currentDom.className = "current";//设置当前选择dom样式
      //清除当前选择dom前一个元素样式
      //如果当前dom是第一个项目，则清除最后一个项目样式
      if(currentDom.previousElementSibling == null){
        uldom.lastElementChild.className = "clear";
      }else{
        currentDom.previousElementSibling.className = "clear";
      }

    }
  </script>
</html>
